<!--
    * Time    : 2021-03-16 17:22:15
    * Author  : zhangTj
    * Desc    : tap页面 - 调查问卷回显
-->

<template>
    <div>
        <!-- 楼层 -->
        <template v-for="(floor, index) in questionList">
            <div class="p-15p" :key="floor.id">
                <div class="font-14">{{ index + 1 }}.{{ floor.title || '标题' }}</div>
                <div class="p-1 mt-1 bg-fff font-14">
                    <span v-if="floor.type == 'date'">
                        <span v-if="floor.content">{{ floor.content | dateformat('YYYY-MM-DD') }}</span>
                        <span v-else>用户暂未选择日期</span>
                    </span>
                    <span v-else-if="floor.type == 'email'">{{ floor.content || '用户未填写邮箱' }}</span>
                    <span v-else-if="floor.type == 'richText'" v-html="floor.content"></span>
                    <template v-else-if="floor.type == 'photo'">
                        <div v-if="floor.content && floor.content.length" class="grid-column3 grid-gap20">
                            <div
                                @click="previewImg(floor.content)"
                                v-for="(img, index) in floor.content"
                                :key="index"
                                style="width: 1.8rem; height: 1.8rem"
                            >
                                <img :src="$imgUrlHead + img" class="w-100 h-100" style="object-fit: contain" alt="" />
                            </div>
                        </div>
                        <span>用户未上传图片</span>
                    </template>

                    <span v-else-if="floor.type == 'textSelect' && floor.subType == 'radio'">
                        <span v-if="checkInfo([{ type: 'hasValue', value: floor.content }])">
                            {{ floor.optionList.filter((item) => item.id == floor.content)[0].value }}
                        </span>
                        <span v-else>用户暂未选择任何选项</span>
                    </span>
                    
                    <template v-else-if="floor.type == 'textSelect' && floor.subType == 'checkbox'">
                        <template v-if="floor.content && floor.content.length">
                            <span v-for="ops in floor.content" :key="ops" class="mr-1">
                                {{ floor.optionList.filter((item) => item.id == ops)[0].value }}
                            </span>
                        </template>
                        <span v-else>用户暂未选择任何选项</span>
                    </template>

                    <template v-else-if="floor.type == 'photoSelect' && floor.subType == 'radio'">
                        <template v-if="checkInfo([{ type: 'hasValue', value: floor.content }])">
                            <div class="grid-column3 grid-gap20">
                                <div
                                    @click="previewImg(floor.optionList.filter((item) => item.id == floor.content)[0].value, photoIndex)"
                                    style="width: 1.8rem; height: 1.8rem"
                                    v-for="(photo, photoIndex) in floor.optionList.filter((item) => item.id == floor.content)[0].value"
                                    :key="photoIndex"
                                >
                                    <img :src="$imgUrlHead + photo" class="w-100 h-100" style="object-fit: contain" alt="" />
                                </div>
                            </div>
                        </template>
                        <span v-else>用户暂未选择任何选项</span>
                    </template>

                    <template v-else-if="floor.type == 'photoSelect' && floor.subType == 'checkbox'">
                        <template v-if="floor.content && floor.content.length">
                            <div class="grid-column3 grid-gap20" v-for="picContent in floor.content" :key="picContent">
                                <div
                                    @click="previewImg(floor.optionList.filter((item) => item.id == picContent)[0].value, photoIndex)"
                                    style="width: 1.8rem; height: 1.8rem"
                                    v-for="(photo, photoIndex) in floor.optionList.filter((item) => item.id == picContent)[0].value"
                                    :key="photoIndex"
                                >
                                    <img :src="$imgUrlHead + photo" class="w-100 h-100" style="object-fit: contain" alt="" />
                                </div>
                            </div>
                        </template>
                        <span v-else>用户暂未选择任何选项</span>
                    </template>

                    <span v-else-if="floor.type == 'region'">{{ floor.regionName || '用户未选择地区' }}</span>

                    <span v-else>{{ floor.content || '用户未填写内容' }}</span>
                </div>
            </div>
        </template>

        <Noempty v-if="error && !partLoading" :pic="require('@/assets/images/personal-no-good.png')" title="暂无数据" />
        <part-loading v-model="partLoading" backgroundColor="#fff" height="400px" size="24px" :color="themes.color" />
    </div>
</template>

<script>
import { questionnaireApi } from '@/api/questionnaire'
import PartLoading from '@/components/PartLoading/PartLoading'
import Noempty from '@/components/Noempty/Noempty'
import { mapState } from 'vuex'
import { ImagePreview } from 'vant'
import checkInfo from '@/utils/checkInfo'

export default {
    name: 'TapInfo',
    components: {
        Noempty,
        PartLoading
    },
    props: {
        id: {
            type: Number | String,
            required: true
        }
    },
    data() {
        return {
            partLoading: true,
            error: false, // 错误时显示占位图
            rawData: {}, // 原始数据
            questionList: [] // 楼层数据(二维数组)
        }
    },
    computed: {
        ...mapState(['themes'])
    },
    watch: {},
    created() {},
    destroyed() {},
    mounted() {
        this.getDetail()
    },
    methods: {
        // 获取问卷详情
        getDetail() {
            questionnaireApi
                .questionnaireResultId(this.id)
                .then((res) => {
                    if (!res.success) {
                        return void this.$toast(res.msg)
                    }

                    this.rawData = res.result // 原始数据
                    const questionData = JSON.parse(res.result.resultContent)
                    questionData.forEach((item, index) => {
                        if (item.type == 'pagination') {
                            questionData.splice(index, 1)
                        }
                        if (item.type == 'richText') {
                            questionData.splice(index, 1)
                        }
                    })
                    this.questionList = questionData
                })
                .catch((err) => {
                })
                .finally((_) => {
                    this.partLoading = false
                })
        },

        // 预览图片
        previewImg(picList, index = 1) {
            ImagePreview(
                picList.map((item) => this.$imgUrlHead + item),
                index
            )
        },

        // 验证
        checkInfo(arg) {
            return checkInfo(arg)
        }
    }
}
</script>

<style>
img {
    width: 100%;
}
</style>
